import { Callout } from 'nextra/components'

# Syntax Highlighting

If you don't like the default syntax highlighting provided by Hugo,
Setting `customSyntaxHighlighting = true` will enable the custom syntax highlighting provided by Chroma.

<Callout type="info">
You still need to set below configuration in your `hugo.toml`:

```toml
[markup]
[markup.highlight]
noClasses = false
```

This makes sure that the generated HTML uses classes for syntax highlighting, not inline styles.
</Callout>

Then you need to specify what themes you want to use and generate them. They need to follow below established rules:

- You must generate separate themes for light and dark modes
- They must be named `syntax-light.css` and `syntax-dark.css`
- They must be in the `assets/css` directory

For example, you can generate them using the following command:

```bash
# In your project directory.
hugo gen chromastyles --style=github > assets/css/syntax-light.css
hugo gen chromastyles --style=github-dark > assets/css/syntax-dark.css
```

Please refer to the [official documentation](https://gohugo.io/content-management/syntax-highlighting/) for more information.
